<template>
    <div>
        <h1 :style="{opacity}">生命周期</h1>
        home page
        <ul>
            <li>数据1：<input type="text"></li>
            <li>数据2：<input type="text"></li>
            <li>数据3：<input type="text"></li>
        </ul>
    </div>

</template>
<script>
export default {
name:"home",
   data(){
       return{
           opacity:1,
           mySetInterval: null,
       }
   },
   mounted(){
       console.log("home page被挂载",this);
   },
   beforeDestroy(){
       console.log("home page被销毁");
   },

    // 组件内路由守卫
    // 通过路由规则，进入该组件时被调用
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建

    beforeRouteEnter (to, from, next) {
        console.log("进：",this); // undefined
        // ...
        next(vm => {
            // beforeRouteEnter不能通过this访问组件实例，但是可以通过 vm 访问组件实例
            console.log(vm) // 此时可以访问
        })
    },
    // 组件内路由守卫
    // 通过路由规则，离开该组件时被调用
    beforeRouteLeave (to, from, next) {
        // ...
        console.log("离：",this);
        next()
    },

   activated(){
       // 激活
       this.mySetInterval= setInterval(()=>{
                this.opacity -= 0.01
                if (this.opacity <= 0) {
                    this.opacity = 1
                }
            },16) 
   },
   deactivated(){
       // 失活
       clearInterval(this.mySetInterval);
   }
}
</script>